<!--
  @author:  long
  @date:    2023/3/7
  @file:    客户详情
  @require:
-->
<template>
  <div>
    <el-row :gutter="20" class="details product-details">
      <el-col :span="5" class="details-left box-card" style="min-height: 800px">
        <el-card style="min-height: 100%">
          <div class="details-left-top details-left-box">
            <div class="top">
              <div class="top-img">
                <svg-icon
                  :icon-class="'svg_contacts'"
                  class="block w-80px h-80px m-auto mb-15px"
                />
              </div>
              <label>
                {{ details.contactName }}
              </label>
              <p>
                {{ details.customerName }}
              </p>
            </div>
            <!--产品分类-->
            <el-row :gutter="24" class="mt-5">
              <el-col
                :span="8"
                class="border-r-2 border-fuchsia-600 border-gray-100 border-r-solid"
              >
                <p class="text-gray-700 font-bold text-base">1/10</p>
                <p class="text-sm mt-10px">订单</p>
              </el-col>
              <el-col
                :span="8"
                class="border-r-2 border-fuchsia-600 border-gray-100 border-r-solid"
              >
                <p class="text-gray-700 font-bold text-base">1/10</p>
                <p class="text-sm mt-10px">任务</p>
              </el-col>
              <el-col :span="8">
                <p class="text-gray-700 font-bold text-base">1/10</p>
                <p class="text-sm mt-10px">商机</p>
              </el-col>
            </el-row>
          </div>

          <el-row
            :gutter="24"
            class="my-2 border-b-2 border-fuchsia-600 border-gray-100 border-b-solid"
          >
            <el-col :span="12" class="mb-2">
              <el-button type="primary" @click="clickFn('followUp')"
                >写新跟进</el-button
              >
            </el-col>
            <el-col :span="12" class="mb-2">
              <div>
                <el-checkbox-button
                  indeterminate
                  v-model="starFocus"
                  :class="starFocus ? 'w-100%' : 'w-100% starFocus'"
                  @change="focusChange"
                >
                  <div class="flex items-center">
                    <span class="font-normal">{{
                      starFocus ? '取消关注' : '重点关注'
                    }}</span>
                  </div>
                </el-checkbox-button>
              </div>
            </el-col>
            <el-col :span="12" class="mb-2">
              <el-button type="primary" plain>转移客户</el-button>
            </el-col>
            <el-col :span="12" class="mb-2">
              <el-button type="primary" plain>添加订单</el-button>
            </el-col>
            <el-col :span="12" class="mb-2">
              <el-button type="primary" plain @click="toBusiness"
                >添加商机</el-button
              >
            </el-col>
            <el-col :span="12" class="mb-2">
              <el-button type="primary" plain @click="addTask"
                >添加任务</el-button
              >
            </el-col>

            <el-col :span="12" class="mb-2">
              <el-button type="primary" plain @click="toUpdate"
                >编辑联系人</el-button
              >
            </el-col>
            <el-col :span="12" class="mb-2">
              <el-button type="primary" plain @click="deleteContacts"
                >删除联系人</el-button
              >
            </el-col>
          </el-row>
          <div class="my-4">
            <div class="font-semibold text-xl mb-4">所属信息</div>
            <ul class="cnt qzbm">
              <li>
                <el-icon><Notebook /></el-icon>
                <label>归属公司</label>
                <p>
                  {{ details.orgName != null ? details.orgName : '--' }}
                </p>
              </li>
              <li>
                <el-icon><Notebook /></el-icon>
                <label>归属部门</label>
                <p>{{ details.deptName != null ? details.deptName : '--' }}</p>
              </li>
              <li>
                <el-icon><Notebook /></el-icon>
                <label>归属人</label>
                <p>{{ details.userName != null ? details.userName : '--' }}</p>
              </li>
            </ul>
          </div>
        </el-card>
      </el-col>
      <el-col :span="19" style="min-height: 800px">
        <el-card style="min-height: 100%">
          <el-tabs v-model="tabVal" class="details-right-tabs">
            <el-tab-pane label="概况信息" name="details">
              <contacts-overview :details="details" />
            </el-tab-pane>
            <el-tab-pane label="跟进记录" name="follow">
              <template v-if="tabVal == 'follow'">
                <FollowUpList :tableParam="followUpListParams"></FollowUpList>
              </template>
            </el-tab-pane>
            <el-tab-pane label="商机记录" name="business">
              <template v-if="tabVal == 'business'">
                <BusinessInfo :tableParam="businessParam"></BusinessInfo>
              </template>
            </el-tab-pane>
            <!-- <el-tab-pane label="订单记录" name="order">
              <template v-if="tabVal == 'order'">
                <contacts-order-list :details="details"></contacts-order-list>
              </template>
            </el-tab-pane> -->
            <el-tab-pane label="任务记录" name="taskList">
              <template v-if="tabVal == 'taskList'">
                <task-details :task-param="taskListParam"></task-details>
              </template>
            </el-tab-pane>

            <el-tab-pane label="操作日志" name="operat">
              <template v-if="tabVal == 'operat'">
                <OperationLog :tableParam="followUpListParams"></OperationLog>
              </template>
            </el-tab-pane>
          </el-tabs>
        </el-card>
      </el-col>
    </el-row>
    <!-- 跟进 -->
    <FollowUp :dialogParam="followUpParam" @close="closeFn"></FollowUp>
    <!--   新建任务   -->
    <TaskFrom :dialogParam="taskParam" @closeDialog="closeTask"></TaskFrom>
  </div>
</template>

<script setup name="ContactsDetails">
import OperationLog from '@/businessComponents/OperationLog'
import FollowUpList from '@/businessComponents/FollowUpList'
import FollowUp from '@/businessComponents/FollowUp'

import ContactsOverview from '@/views/customerManage/contactsModules/contactsDetails/modules/ContactsOverview.vue'
import { delContact, getContactInfo } from '@/api/customerManage/contactList'
import { getTreeNodeByParam } from '@/utils/commo'
import useCommonStore from '@/store/modules/common'
import { getDept } from '@/api/system/dept'
import { getCurrentInstance } from 'vue'
import ContactsOrderList from '@/views/customerManage/contactsModules/contactsDetails/modules/ContactsOrderList.vue'
import TaskFrom from '@/views/rsgl/taskManage/modules/add.vue'
import TaskDetails from '@/views/salesManage/businessManage/businessDetails/modules/taskDetails.vue'
import BusinessInfo from '@/views/salesManage/businessManage/businessDetails/modules/businessInfo.vue'
import useUserStore from '@/store/modules/user'
import { getFocus, saveFocus } from '@/api/common/common'
const commonStore = useCommonStore()
const { proxy } = getCurrentInstance()

const router = useRouter()
const followUpListParams = ref({})

const starFocus = ref(false)
const data = reactive({
  rete: '',
  details: {},
  followUpParam: {}, //跟进
  tabVal: 'details'
})
const { rate, details, followUpParam, tabVal } = toRefs(data)

const taskParam = ref({})
const taskListParam = ref({
  businessType: '5',
  businessId: router.currentRoute.value.query.contactsId,
  businessName: ''
})
const businessParam = ref({
  businessId: router.currentRoute.value.query.contactsId,
  businessType: '5'
})
/*** 重点关注 start */
const userStore = useUserStore()
/**
 * 切换重点关注
 */
function focusChange() {
  let params = {
    businessId: router.currentRoute.value.query.contactsId,
    tableName: 'biz_contact',
    userId: userStore.user.userId,
    focus: starFocus.value
  }
  saveFocus(params).then(res => {
    proxy.$modal.msgSuccess('操作成功')
  })
}

/**
 * 获取客户重点关注详情
 */
async function getFocusInfoData() {
  const focusRes = await getFocus({
    businessId: router.currentRoute.value.query.contactsId,
    tableName: 'biz_contact'
  })
  starFocus.value = focusRes.data ? focusRes.data : false
}
/*** 重点关注 end */
// 新建任务
const addTask = () => {
  //   taskParam.value.isVisible = true
  //   taskParam.value.businessType = '5'
  //   taskParam.value.businessId = router.currentRoute.value.query.contactsId
  //   taskParam.value.businessName = details.value.contactName
  let object = {
    businessType: '5',
    businessId: router.currentRoute.value.query.contactsId,
    businessName: details.value.contactName
  }
  router.push({
    path: '/rsgl/other/addTasking',
    query: { taskParam: JSON.stringify(object) }
  })
}
// 任务关闭
const closeTask = () => {
  taskParam.value.isVisible = false
}

// 跳转到添加商机
const toBusiness = () => {
  //新建商机
  router.push({
    path: '/sales/businessManage/addBusiness',
    query: {
      flag: 'add',
      contactsId: router.currentRoute.value.query.contactsId,
      contactsName: details.value.contactName,
      type: 'contacts',
      projectType: '5'
    }
  })
}

// 组件关闭隐藏
const closeFn = row => {
  switch (row) {
    case 'order':
      // 订单

      break
    case 'contract':
      // 合同

      break
    case 'task':
      // 任务

      break
    case 'word':
      // 工单

      break
    case 'followUp':
      // 跟进
      followUpParam.value.isVisible = false
      init()
      break
  }
}

const clickFn = type => {
  console.info('type', type)
  switch (type) {
    case 'contacts':
      // 联系人

      break

    case 'order':
      // 订单

      break
    case 'contract':
      // 合同

      break
    case 'task':
      // 任务

      break
    case 'word':
      // 工单

      break
    case 'followUp':
      // 跟进
      followUpParam.value.isVisible = true
      followUpParam.value.tableName = 'biz_contact'
      followUpParam.value.businessId =
        router.currentRoute.value.query.contactsId
      followUpParam.value.linkName = details.value.contactName //'联系人名称'
      console.info('followUpParam', followUpParam)
      break
  }
}

/**
 * 编辑联系人
 */
function toUpdate() {
  router.push({
    path: '/customerManage/contactsModules/contactsEdit',
    query: {
      flag: 'update',
      contactsId: router.currentRoute.value.query.contactsId
    }
  })
}

/**
 * 删除联系人
 */
function deleteContacts() {
  if (details.value.isChiefly == '1') {
    proxy.$modal.msgWarning('首要联系人无法删')
    return
  }
  proxy.$modal
    .confirm('是否删除联系人数据？')
    .then(res => {
      const params = {
        ids: details.id
      }
      delContact(params).then(res => {
        proxy.$modal.msgSuccess(res.msg)
      })
    })
    .catch(() => {})
}
/**
 * 获取联系人信息
 */
function getContactsInfoData() {
  let id = router.currentRoute.value.query.contactsId
  getContactInfo(id).then(async res => {
    let obj = { ...res.data.eo, ...res.data.co }
    obj.eoId = res.data.eo.id
    obj.starRating = parseInt(obj.starRating)
    obj.customerName = res.data.customerName
    //获取部门人员数据
    const deptUserData = await commonStore.getUseTreeData()
    details.value = obj
    getDept(obj.deptId).then(res => {
      details.value.deptName = res.data.deptName
    })
    getDept(obj.orgId).then(res => {
      details.value.orgName = res.data.deptName
    })

    //根据当前用户id获取uuid
    let userObj = getTreeNodeByParam(
      deptUserData,
      details.value.userId,
      'id',
      []
    )
    details.value.userName = userObj[0].label
    taskListParam.value.businessName = details.value.contactName
    // 获取归属公司名称
    commonStore.getCompanyData().then(data => {
      let o = getTreeNodeByParam(data, details.value.orgId, 'id', [])
      details.value.orgName = o[0].label
    })
    initFollowSession()
    console.info('obj', obj)
  })
}

const initFollowSession = () => {
  // 客户模块
  followUpListParams.value = {
    businessId: router.currentRoute.value.query.contactsId,
    busineName: details.value.contactName,
    tableName: 'biz_contact'
  }
  console.info('followUpListParams.value', followUpListParams.value)
}

async function init() {
  if (router.currentRoute.value.query.tabPane) {
    tabVal.value = router.currentRoute.value.query.tabPane
  }
  await getContactsInfoData()
  // 获取关注重点详情
  await getFocusInfoData()
}
init()
</script>

<style scoped lang="scss">
@import '@/assets/styles/detailsStyle.scss';
</style>
